<template>
  <div class="loginYzm">
    <p>
      <input type="text"  placeholder="请输入手机号" v-model="val1" @focus="focus1" @blur="inputBlur" name="mobile" :class="{phClass: inputFocusName == 'mobile'}">
      <span>中国+86 &nbsp;|</span>
    </p>
    <p>
      <input type="text" placeholder="请输入6位短信验证码" v-model="val2" @focus="focus2" @blur="inputBlur" name="code" :class="{phClass: inputFocusName == 'code'}">
      <button @click="sendyzm" v-if="yzmtime" class="sendyzm">发送验证码</button>
      <button v-if="djstime" disabled class="btnyzm">{{time}}s后发送</button>
    </p>
    <button @click="login">登陆</button>
    <p>
      <img src="../../assets/img/登陆注册/登录/√2.png" alt="" v-if="show" @click="toggle">
      <img src="../../assets/img/登陆注册/登录/√.png" alt="" v-if="!show" @click="toggle">
      <span @click="toggle">下次自动登陆</span>
      <a href="javascript:;" @click="$router.push({path:'/findpassword'})">忘记密码？</a>
    </p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show: true,
      val1: "",
      val2: "",
      reg: /^[1][3,4,5,7,8][0-9]{9}$/,
      time: 60,
      yzmtime: true,
      djstime: false,
      inputFocusName : ''
    };
  },
  methods: {
    toggle() {
      this.show = !this.show;
    },
    async login() {
      if (this.val1 == "") {
        this.$message.error("手机号不能为空");
      } else if (this.val2 == "") {
        this.$message.error("验证码不能为空");
      } else if (!this.reg.test(this.val1)) {
        this.$message.error("手机号格式不对");
        this.val1 = "";
      } else if (this.val2.length < 6) {
        this.$message.error("短信验证码位6位");
      } else {
        await this.$ajax
          .post(this.Ipurl + "user/loginByCode", {
            mobile: this.val1,
            validateCode: this.val2
          })
          .then(res => {
            this.result = res.data.dataInfo;
            if (res.data.returnCode !=1000) {
              this.$message.error(res.data.message);
              this.val2 = "";
            } else {
              if (this.show) {
                // 将手机号存入localstorage中
                window.localStorage.setItem("mobile", this.result.mobile);
                // 为了安全性建议不要保存密码
                window.localStorage.setItem("password", this.val2);
              }
              // mobile,token,userId存入sessionstorage中。
              this.userInfo.mobile = this.result.mobile;
              this.userInfo.token = this.result.token;
              this.userInfo.userId = this.result.userId;
              window.sessionStorage.setItem(
                "userInfo",
                JSON.stringify(this.userInfo)
              );
              this.$router.push({ path: "/personal" });
            }
          });
      }
    },
    async sendyzm() {
      if (this.val1 && this.reg.test(this.val1)) {
        this.yzmtime = false;
        this.djstime = true;
        var Time = setInterval(() => {
          this.time--;
          if (this.time == 0) {
            window.clearInterval(Time);
            this.time = 60;
            this.yzmtime = true;
            this.djstime = false;
          }
        }, 1000);
        await this.$ajax
          .post(this.Ipurl + "user/getVerifyCode", {
            mobile: this.val1,
            templateCode: "SMS_143705167"
          })
          .then(res => {
            if (res.data.returnCode == 1000) {
              this.$message.success("请注意查收！！！");
            } else {
              this.$message.error(res.data.message);
            }
          });
      } else {
        this.$message.error("手机号为11位并且不能为空");
      }
    },
    focus1(e) {
      this.$message("请输入真实的11位手机号");
      this.inputFocusName = e.target.name;
    },
    focus2(e) {
      this.$message("验证码为6位");
      this.inputFocusName = e.target.name;
    },
    inputBlur(){
      this.inputFocusName = '';
    }
  }
};
</script>
<style scoped>
.loginYzm {
  margin-top: 60px;
  overflow: hidden;
}
.loginYzm > p:nth-child(1) {
  position: relative;
}
.loginYzm > p:nth-child(1) > span {
  position: absolute;
  top: 13px;
  left: 23px;
  font-size: 18px;
  color: rgb(204, 204, 204);
}
.loginYzm > p:nth-child(1) > input {
  width: 100%;
  height: 48px;
  padding-left: 120px;
  font-size: 16px;
  color:gray;
  border: 1px solid gray;
  border-radius: 5px;
}
.loginYzm > p:nth-child(2) > input {
  width: 220px;
  height: 48px;
  padding-left: 20px;
  font-size: 16px;
 color:gray;
  border: 1px solid gray;
  border-radius: 5px;
}
input::-webkit-input-placeholder{
            color: #c6c6c6;
        }
.loginYzm > p:nth-child(2) > button {
  width: 120px;
  height: 48px;
  color: #fff;
  background: rgb(237, 64, 64);
  font-size: 16px;
  border-radius: 5px;
}
.loginYzm > button {
  width: 100%;
  height: 50px;
  margin-top: 30px;
  color: #fff;
  background: rgb(237, 64, 64);
  font-size: 18px;
  border-radius: 5px;
}
.loginYzm > p:nth-child(2) {
  margin-top: 30px;
}
.loginYzm > p:nth-child(4) {
  margin-top: 30px;
  cursor: pointer;
}
.loginYzm > p:nth-child(4) > span {
  font-size: 18px;
  color: rgb(34, 34, 34);
}
.loginYzm > p:nth-child(4) > a {
  float: right;
  font-size: 18px;
  color: rgb(204, 204, 204);
}

.phClass::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color: transparent
}
.phClass:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color: transparent
}
.phClass::-moz-placeholder { /* Mozilla Firefox 19+ */
   color: transparent
}
.phClass:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color: transparent
}
</style>